<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="css/imageViewer.css" />
	</head>

	<body class="mui-fullscreen" id="id_imageScreen">

		<div class="mui-page-content">
			<div id="id_imageOpe" align="center">
				<a class="cl_opeItem" href="javascript:void(0);" onclick="download_()" id="id_btDownload">
					<span class="mui-icon mui-icon-download"></span>
					<span class="mui-tab-label">下载</span>
				</a>
				<a class="cl_opeItem" href="javascript:void(0);" onclick="like()" id="id_btLike">
					<span class="mui-icon-extra mui-icon-extra-heart" id="id_disliked"></span>
					<span class="mui-icon-extra mui-icon-extra-heart-filled" id="id_liked"></span>
					<span class="mui-tab-label">收藏</span>
				</a>
				<!--<a class="cl_opeItem" href="">
					<span class="mui-icon-extra mui-icon-extra-share"></span>
					<span class="mui-tab-label">分享</span>
				</a>-->
				<a class="cl_opeItem" href="javascript:void(0);" onclick="setWallpaper()" id="id_btSet">
					<span class="mui-icon-extra mui-icon-extra-phone"></span>
					<span class="mui-tab-label">设为壁纸</span>
				</a>
			</div>

			<div class="cl_left" id="id_left">
				<a class="cl_opeItem" href="javascript:void(0);" onclick="previousImg()" id="id_btPre">
					<span class="mui-tab-label"><</span>
				</a>
			</div>
			<div class="cl_right" id="id_right">
				<a class="cl_opeItem" href="javascript:void(0);" onclick="nextImg()" id="id_btNext">
					<span class="mui-tab-label">></span>
				</a>
			</div>

			<div class="mui-content-padded" style="margin: 0;">
				<img src="img/10.jpg" id="id_imgContent" />
			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/imageViewer.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.jss"></script>
		<script type="text/javascript">
			var viewer = {};
			mui.init();
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var imgUrl = self.imgUrl;
				var currentIndex = self.currentIndex;
				var prefix = self.prefix;
				var suffix = self.suffix;
				var begin = self.begin;
				var end = self.end;
				viewer = getImageViewer(imgUrl, prefix, suffix, currentIndex, begin, end);
				console.log('show image on imageViewer');
				//				document.getElementById("title").innerHTML = currentClass;

			})

			var hei = window.innerHeight;
			var wid = window.innerWidth;
			document.getElementById("id_imgContent").style.height = hei + "px"; // 图片按照高度缩放，默认为屏幕高
			document.getElementById("id_imageOpe").style.width = wid + 'px'; // 设置为屏幕宽
			document.getElementById("id_imageOpe").style.marginTop = (hei - 80) + 'px'; // 把操作栏移到页面下方

			document.getElementById("id_left").style.marginTop = (hei / 2 - 80) + 'px';
			//			document.getElementById("id_left").style.marginTop = (hei  - 80 )+ 'px';
			document.getElementById("id_right").style.marginTop = (hei / 2 - 80) + 'px';
			document.getElementById("id_right").style.marginLeft = (wid - 30) + 'px';

			function download_() {
				viewer.downloadImg();
			}

			function like() {
				if(viewer.isLiked())
					viewer.disLike();
				else
					viewer.like();
			}

			function setWallpaper() {
				viewer.setWallpaper();
			}

			function nextImg() {
				viewer.nextImg();
			}

			function previousImg() {
				viewer.previousImg();
			}

			//			console.log(hei + ',' + $("#id_imgContent").height);
		</script>
	</body>

</html>